(function (fruit, util, position, dom, ui, global) {
    var document = global.document;
    var engine = fruit.eventEngine;
    ui.define('fruit.ui.Dialog', fruit.ui.Popup, {
        events:['open', 'close', 'ok', 'cancel'],
        view:{
            props:{
                'class':'f-dialog',
                style:{
                    display:'none',
                    position:'absolute'
                },
                role:'dialog'
            },
            statics:{
                zIndex:1000
            },
            content:[
                {
                    name:'header',
                    props:{
                        'class':'f-dialog-header'
                    },
                    content:[
                        {
                            tag:'i',
                            name:'headerIcon'
                        },
                        {
                            tag:'span',
                            name:'headerText',
                            props:{
                                'class':'f-dialog-header-title'
                            },
                            content:'{#title}'
                        },
                        {
                            props:{
                                'class':'f-toolbar'
                            },
                            content:[
                                {
                                    tag:'button',
                                    props:{
                                        type:'button',
                                        title:'Close',
                                        'class':'f-toolbar-item f-icon-btn'
                                    },
                                    content:{
                                        tag:'i',
                                        props:{
                                            'class':'icon-close-x18'
                                        }
                                    },
                                    events:{
                                        click:'{#_onCloseClick}'
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    name:'body',
                    props:{
                        'class':'f-dialog-content'
                    }
                },
                {
                    name:'footer',
                    props:{
                        'class':'f-dialog-footer'
                    },
                    content:{
                        props:{
                            'class':'f-toolbar f-toolbar-right'
                        },
                        content:[
                            {
                                name:'btnCancel',
                                tag:'button',
                                props:{
                                    'class':'f-btn'
                                },
                                events:{
                                    click:'{#_onCancelClick}'
                                },
                                content:'Cancel'
                            },
                            {
                                name:'btnOk',
                                tag:'button',
                                props:{
                                    'class':'f-btn f-btn-primary'
                                },
                                events:{
                                    click:'{#_onOkClick}'
                                },
                                content:'Ok'
                            }
                        ]
                    }
                }
            ],
            events:{
                'dragstart':'{#_dlg_dragstart}',
                'drag':'{#_dlg_drag}',
                'dragend':'{#_dlg_dragend}'
            }
        },
        properties:{
            title:{
                value:null,
                observable:true
            },
            okText:{
                getter:function () {
                    return this.$('btnOk').getAttribute('text');
                },
                setter:function (value) {
                    var btn = this.$('btnOk');
                    if (value) {
                        btn.removeClass('hidden');
                        btn.setAttribute('text', value);
                    }
                    else {
                        btn.addClass('hidden');
                    }
                }
            },
            cancelText:{
                getter:function () {
                    return this.$('btnCancel').getAttribute('text');
                },
                setter:function (value) {
                    var btn = this.$('btnCancel');
                    if (value) {
                        btn.removeClass('hidden');
                        btn.setAttribute('text', value);
                    }
                    else {
                        btn.addClass('hidden');
                    }
                }
            },
            content:{
                getter:function () {
                    return this._content;
                },
                setter:function (value) {
                    this._content = value;
                    var body = this.$('body');
                    body.empty();
                    if (value instanceof ui.Element) {
                        body.appendChild(value);
                    }
                    else if (util.isObject(value)) {
                        var child = ui.viewEngine.create(value);
                        child.setBinding('model', '', {
                            source:this
                        });
                        body.appendChild(child);
                    }
                    else {
                        body.set('html', value);
                    }
                }
            },
            modal:{
                value:true
            },
            autoClose:{
                value:true
            }
        },
        methods:{
            _dlg_dragstart:function (sender,event) {
                this._orginal_point=event.getOffsetXY();
            },
            _dlg_drag:function (sender,event) {
                var self = this;
                var pageXY=event.getPageXY();
                var scroll=position.getScroll();
                this.setStyles({
                    left:pageXY.x - self._orginal_point.x -scroll.scrollX,
                    top:pageXY.y - self._orginal_point.y-scroll.scrollY
                });
            },
            _dlg_dragend:function () {
                this._orginal_point = null;
            },
            open:function (inOptions) {
                if (!this._opened) {
                    var orginal_point;
                    var position = this.inherited(inOptions);
                    if (this.modal()) {
                        this._overlay = this._createOverLay(this.getStyle('z-index') - 1);
                    }
                    this._opened = true;
                    this.fire('open');

                    return position;
                }
            },
            close:function () {
                if (this._opened) {
                    this.inherited();
                    this._opened = false;
                    this._overlay && (this._overlay.style.display = 'none');
                    this.fire('close');
                }
            },
            _onCancelClick:function () {
                if (this.fire("cancel") !== false && this.autoClose()) {
                    this.close();
                }
            },
            _onOkClick:function () {
                if (this.fire("ok") !== false && this.autoClose()) {
                    this.close();
                }
            },
            _onCloseClick:function () {
                if (this.fire("cancel") !== false) {
                    this.close();
                }
            },
            _createOverLay:function (inZIndex) {
                var overlay = dom.createElement('<div class="f-scrim"></div>');
                overlay.style.zIndex = inZIndex;
                return document.body.appendChild(overlay);
            }
        }
    });
})(fruit, fruit.util, fruit.position, fruit.dom, fruit.ui, window);